<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            startAngle: -130,
            name: "本月",
            type: "pie",
            radius: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // show: true,
              fontSize: "30",
              fontWeight: "bold",
              position: "left",
            },
            left: 0,
            right: "75%",
            top: 0,
            bottom: 0,
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 95,
                name: "达标",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#1d54f7" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#1d54f7" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 5,
                name: "不达标",
                itemStyle: {
                  normal: {
                    borderWidth: 8,
                    borderColor: {
                      colorStops: [
                        {
                          offset: 0,
                          //   黄
                          color: "#eef851" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          //   黄色
                          color: "#eef851" || "#00cefc", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          //   蓝色
                          color: "#68eaf9" || "#367bec", // 100% 处的颜色
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: "bottom",
                value: 25,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
